/* eslint-disable @typescript-eslint/no-unused-vars */
// 带input的color-picker
import React, { useEffect, useState } from 'react';
import { SketchPicker } from 'react-color';
import { Input, Popover } from 'antd';

interface IProps {
	color?: any;
	change: Function;
	style?: any;
	key?: string;
}

class InputColorPicker extends React.Component<IProps> {
	state = {
		visible: false,
	};

	setRgbaColor = ( color ) => {
		// console.log( color );
		const rgba = `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`;
		this.props.change( rgba );
	};

	shouldComponentUpdate( nextProps: Readonly<IProps>, nextState: Readonly<{ color: any, visible: boolean }>, nextContext: any ): boolean {
		if ( JSON.stringify( this.props.color ) !== JSON.stringify( nextProps.color ) ||
			this.state.visible !== nextState.visible ) {
			return true;
		} else {
			return false;
		}
	}

	// getSnapshotBeforeUpdate( prevProps: Readonly<IProps>, prevState: Readonly<{ color: any }> ): any | null {
	// 	let changeObj = Object.create( null );

	// 	if ( this.state.color !== prevState.color ) {
	// 		changeObj.needColorChange = true;
	// 	}

	// 	return changeObj;
	// }

	// async componentDidUpdate( prevProps: Readonly<IProps>, prevState: Readonly<{}>, snapshot?: any ) {
	// 	// if ( snapshot.needColorChange ) {

	// 	// };
	// }

	handleVisibleChange = visible => {
		this.setState( { visible } );
	};

	render() {
		const color_block = {
			width: '36px',
			height: '14px',
			borderRadius: '2px',
			background: this.props.color,
		};
		const swatch = {
			padding: '5px',
			background: '#fff',
			borderRadius: '1px',
			boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
			display: 'inline-block',
			cursor: 'pointer',
		};

		// console.log( color_block );
		
		return (
			<div style={this.props.style}>
				<Popover
					visible={this.state.visible}
					onVisibleChange={this.handleVisibleChange}
					content={
						<SketchPicker color={this.props.color} onChangeComplete={this.setRgbaColor} />
					}
					trigger="click"
				>

					<div style={swatch}>
						<div style={color_block} />
					</div>
					{/* <Input value={color} /> */}
				</Popover>
			</div>
		);
	}
}

export default React.memo( InputColorPicker );
